<html>
<head>
  <title>Hit Test: Table with empty cells</title>
  <style>
    table.testtable {background-color: green; border: 0px; border-collapse: collapse;}
    table.testtable td { font-size: 20px; border: none; background-color: red; border-spacing:0px; width:30px; height:30px;}
    body { margin: 0px 0px 0px 0px; }
  </style>
  <script language="JavaScript" type="text/javascript">
    var cellHeight = 30;
    var cellWidth = 30;
    var logMsg = "";
    var lastSuccess = 0;
    var failed = false;

   if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function isEmpty(row, col) {
      return row == 0 && col > 0;
    }

    function cellHit(cell) {
      var cellId = 3 * cell.parentNode.rowIndex  + cell.cellIndex;
      // If we see an even number of moves then the cell's bit is 1 else 0
      lastSuccess = cellId;
    }

    function doTest() {
      var ypos = cellHeight / 2;
      for (var row = 0; row < 2; row++) {
        var xpos = cellWidth / 2;
        for (var col = 0; col < 3; col++) {
          var oldLastSuccess = lastSuccess;
          var elem = document.elementFromPoint(xpos, ypos);
          if (elem && elem.onmousemove) elem.onmousemove();
          var cellId = 3 * row + col;
          logMsg += "Hit cell at row: " + row + ", column: " + col + ": ";     
          var success = lastSuccess == cellId;
          var empty = isEmpty(row, col);
          if (!success && !empty) failed = true;
          logMsg += (success ? "SUCCESS" : ((empty &&  lastSuccess == oldLastSuccess)? "EMPTY" : "FAIL")) + "<br />";
          xpos += cellWidth;
        }
        ypos += cellHeight;
      }
      document.body.innerHTML = (failed ? "FAIL!!!<br/>" : "SUCCESS!!!<br/>") +logMsg;
      if (window.testRunner) {
          testRunner.notifyDone();
      }
    }
  </script>
</head>
  <body onload="doTest()">

    <table class="testtable">
      <tr>
        <td align="right" onmousemove="cellHit(this)">
        </td>
      </tr>
      <tr>
        <td onmousemove="cellHit(this)">
        </td>
        <td onmousemove="cellHit(this)">
        </td>
        <td onmousemove="cellHit(this)">
        </td>
      </tr>
    </table>
  </body>
</html>
